<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="html-box" v-if="datas.show_list">
      <div id="userinfo">
        <div style="text-align: center;font-size: 18px" v-if="datas.show_list.length <= 0">请设置显示板块内容</div>
        <ul>
          <li v-for="item in datas.show_list" :key="item.value">
            <span><template v-if="showMoney.includes(item.value)">￥</template>66.66</span>
            <span>{{item.label}}</span>
          </li>
        </ul>
      </div>
      <!--<div style="height: 10px;background-color: #f5f5f5"></div>-->
    </div>
  </div>
</template>

<script>
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {preview_color,} = this.datas;

			return `
		    .component-${this.id} .html-box {
		        background-color: ${preview_color.color};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
		    }
		`;
		}
	};

	export default {
		props: ["id", "datas", "styles"],
		data() {
			return {
        showMoney: ['balance','extension','red_packet']//是否需要显示￥符号
      };
		},
		computed: {
			css() {
				return "<style>" + css.call(this) + "</style>";
			},
			className() {
				const name = ["component-wrapper", `component-${this.id}`];
				return name;
			},
			member_data() {
				if(this.$store.state.design.member_data) {
					return this.$store.state.design.member_data;
				}else {
					return []
				}
			},
		},
		methods: {},
	};
</script>

<style lang="less" scoped>
  * {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  // 默认
  .component-wrapper {
    width: 375px;
  }

  .html-box {
    min-height: 30px;
    padding: 10px 0;
  }

  #userinfo {
    /*background: #fff;*/
    /*border-top: solid 1px #ebebeb;*/
    ul {
      display: flex;
      /*overflow-x: scroll;*/
      white-space: nowrap;
      li {
        flex: 1;
        margin: 5px;
        box-sizing: border-box;
        border: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
      }
      li a {
        color: #8c8c8c;
        text-align: center;
        font-size: 12px;
        display: block;
      }
      li a span {
        color: #222;
        font-size: 16px;
        margin-bottom: 5px;
        height: 20px;
        line-height: 20px;
        display: inline-block;
      }
      li small {
        font-size: 12px;
      }
    }
  }
</style>
